<template>
  <section class="search-result">
    <div class="goods">
      <div class="total">
        搜索关键词 “<span class="key">{{ keyword }}</span
        >” 一共找到 <span class="num">{{ foundTotal }}</span> 件相关产品
      </div>
      <div class="not-found" v-if="notFound">
        <el-image
          style="width: 272px; height: 204px"
          :src="notFoundImg"
          fit="fit"
        ></el-image>
      </div>
      <div v-else>
        <template v-for="item in goods">
          <div class="good" :key="item.id">
            <el-image
              style="width: 234px; height: 150px"
              :src="item.mainPhoto"
              fit="fit"
            ></el-image>
            <div class="content">
              <h3 class="name">{{ item.name }}</h3>
              <div class="descrition">{{ item.recommend | substr }}</div>
              <footer>
                <el-link
                  :underline="false"
                  type="primary"
                  @click="toDetail(item.id, item.type)"
                  >查看详情 >></el-link
                >
                <el-button type="primary" plain @click="toInquiry(item.id)"
                  >立即询价</el-button
                >
              </footer>
            </div>
          </div>
        </template>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      notFoundImg: require("@/assets/not_found.png"),
    };
  },
  computed: {
    keyword() {
      return this.$store.state.user.keyword;
    },
    notFound() {
      return this.$store.state.user.searchGoods.total > 0 ? false : true;
    },
    foundTotal() {
      return this.$store.state.user.searchGoods.total;
    },
    goods() {
      return this.$store.state.user.searchGoods.list;
    },
  },
  methods: {
    toInquiry(id) {
      this.$store.dispatch("user/updateGoodId", { id: id });
    },
    toDetail(id, type) {
      this.$router.push({ path: "/goodsDetail", query: { id, type } });
    },
  },
  filters: {
    substr: function(value) {
      if (value.length > 60) {
        value = value.substring(0, 60) + "……";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-result {
  border-top: 1px solid #ebeef5;

  .goods {
    width: 1200px;
    margin: auto;

    .total {
      margin-top: 15px;
      font-size: 14px;
      line-height: 18px;
      color: #909399;
      text-align: left;

      .key,
      .num {
        color: #3378ff;
      }
    }

    .not-found {
      width: 272px;
      margin: 120px auto 0;
    }

    .good {
      padding: 25px 0;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      justify-content: space-between;
      min-width: 0;

      .content {
        text-align: left;
        width: 906px;

        h3 {
          font-size: 20px;
          line-height: 26px;
          color: #606266;
          margin-top: 10px;
          margin-bottom: 20px;
        }

        .descrition {
          font-size: 14px;
          line-height: 18px;
          display: flex;
          align-items: center;
          color: #909399;
          margin-bottom: 20px;
        }

        footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          ::v-deep .el-link {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
